<template>
  <div style="padding-bottom:20px">
    <div class="nav">
      <a href="javascript:;" class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </a>
      <span class="target" v-for="(item, index) in navList">
        {{ item }}
        <i class="el-icon-arrow-right" v-if="index < navList.length - 1"></i>
      </span>
    </div>
    <div class="content">
      <div class="top">
        <ul>
          <li :class="{ on: index == 1 }" @click="changeTab(1)">课程概述</li>
          <li :class="{ on: index == 2 }" @click="changeTab(2)">课程大纲</li>
<!--          <li :class="{ on: index == 3 }" @click="changeTab(3)">测试考核</li>-->
        </ul>
      </div>
      <div class="detail">
        <ul>
          <li class="baseInfo" v-show="index == 1">
            <dl class="base clear">
              <dt>
                <mImg
                  :url="detailData.coverPath"
                  :defaultUrl="'/static/img/default.png'"
                />
              </dt>
              <dd>
                <p class="title">
                  {{ detailData.courseName }}
                  <span>{{ typeList[detailData.courseType] }}</span>
                </p>
                <p class="descriptionT">课程简介</p>
                <p class="description">{{ detailData.introduction }}</p>
              </dd>
            </dl>
            <div class="teacher">
              <h4 class="title">讲师介绍</h4>
              <div>
                <el-row :gutter="20">
                  <el-col
                    :span="12"
                    v-for="(item, index) in teacherList"
                    :key="index"
                  >
                    <div class="grid-content">
                      <dl>
                        <dt>
                          <mImg
                            :url="item.photoPath"
                            :defaultUrl="'/static/img/person.jpg'"
                          ></mImg
                          >/>
                        </dt>
                        <dd>
                          <h4 class="title">{{ item.lecturerName }}</h4>
                          <div class="description">
                            <span class="tit"
                              >职称：{{ item.professionalTitle }}</span
                            >
                          </div>
                          <div class="description">
                            <span class="tit">标签：{{ item.label }}</span>
                          </div>
                          <div class="description" style="border:none">
                            <span class="tit">介绍：</span>
                            <span class="detail">{{ item.introduction }}</span>
                          </div>
                        </dd>
                      </dl>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </li>
          <li class="course" v-show="index == 2">
            <div class="Thead">
              <div class="tr">
                <div class="td title">课程标题</div>
                <div class="td time">时长</div>
                <div class="td teacher">主讲老师</div>
                <div class="td play">操作</div>
              </div>
            </div>
            <div class="Tbody">
              <div class="tr" v-for="item in videoList">
                <div class="td title">
                  <div class="text-overflow">{{ item.subCourseName }}</div>
                </div>
                <div class="td time">{{ item.videoLength }}</div>
                <div class="td teacher">{{ item.lecturerName }}</div>
                <div class="td play">
<!--                  <span style="margin-right:20px" @click="goSign">-->
<!--                    <i class="iconfont icon-pencil"></i> 班级签到-->
<!--                  </span>-->
                  <span @click="goPlay(item)">
                    <i class="el-icon-caret-right"></i>
                    点击播放
                  </span>
                </div>
              </div>
            </div>
          </li>
          <li class="test" v-show="index == 3">
<!--            <div class="Thead">-->
<!--              <div class="tr">-->
<!--                <div class="td title">试卷标题</div>-->
<!--                <div class="td play">操作</div>-->
<!--              </div>-->
<!--            </div>-->
            <div class="Tbody">
              <div
                class="tr"
                v-for="item in testList"
                v-if="item.paperType == 1"
              >
                <div class="td title">
                  <div class="text-overflow">{{ item.name }}</div>
                </div>
<!--                <div class="td play">-->
<!--                  <span style="margin-right:20px" @click="goAssess(item)">-->
<!--                    <i class="el-icon-edit"></i>-->
<!--                    开始作答-->
<!--                  </span>-->
<!--                  <span @click="goReport(item)">-->
<!--                    <i class="iconfont icon-xy-baobiao"></i>成绩统计-->
<!--                  </span>-->
<!--                </div>-->
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 签到 -->
    <div class="signbox" v-if="signOpen">
      <div class="top">
        <span @click="closeSign">
          <i class="el-icon-close"></i>
        </span>
      </div>
<!--      <div class="classSel" v-if="!startSignS">-->
<!--        <div style="margin-top:55px;margin-bottom:30px">-->
<!--          <span style="padding-right:15px">选择班级:</span>-->
<!--          <el-autocomplete-->
<!--            size="mini"-->
<!--            style="width:196px"-->
<!--            v-model="className"-->
<!--            :fetch-suggestions="querySearchAsync"-->
<!--            @select="handleSelect"-->
<!--          ></el-autocomplete>-->
<!--        </div>-->
<!--        <div>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            style="width:100%;background:#DEE6EC;color:#101010;font-size:14px"-->
<!--            @click="startSign"-->
<!--            >开始签到</el-button-->
<!--          >-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="classSel" v-if="startSignS">-->
<!--        <div style="margin-top:30px;margin-bottom:15px">-->
<!--          <span style="padding-right:15px">班级:</span>-->
<!--          {{ selClass.className }}-->
<!--        </div>-->
<!--        <div style="margin-bottom:20px">-->
<!--          <span style="padding-right:15px">当前签到人数:</span>-->
<!--          {{ signNum }}-->
<!--          <span-->
<!--            style="color:#007CDC;cursor:pointer;float:right;user-select:none"-->
<!--            @click="signFresh"-->
<!--          >-->
<!--            <i class="iconfont icon-shuaxin" style="padding-right:10px"></i>刷新-->
<!--          </span>-->
<!--        </div>-->
<!--        <div>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            style="width:100%;background:#DEE6EC;color:#101010;font-size:14px"-->
<!--            @click="startSignS = false"-->
<!--            >结束签到</el-button-->
<!--          >-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import {
  courseOutline,
  courseOverview,
  courseTest,
  getCourseById
} from "@/api/course";
import { allCategory, classSysList, classSignNum } from "@/api/system";
import { mapMutations } from "vuex";
export default {
  name: "cache",
  data() {
    return {
      index: 1,
      courseId: "",
      detailData: {},
      typeList: {},
      navList: ["全部课程"],
      teacherList: [],
      videoList: [],
      testList: [],
      signOpen: false,
      className: "",
      selClass: null,
      startSignS: false,
      signNum: 0
    };
  },
  methods: {
    ...mapMutations(["SetCourseData"]),
    goBack() {
      this.$router.goBack();
    },
    changeTab(index) {
      this.index = index;
    },
    //统计
    goReport(item) {
      this.$router.push({
        path: "/manageTrainee",
        query: {
          courseId: this.courseId,
          courseName: this.detailData.courseName,
          classId: "",
          pageId: item.id,
          pageName: item.name
        }
      });
    },
    //打开签到
    goSign() {
      // this.$router.push({
      //   path: "/manageTrainee/student/attendance"
      // });
      this.signOpen = true;
      this.className = "";
      this.selClass = null;
    },
    closeSign() {
      this.signOpen = false;
      this.startSignS = false;
      this.className = "";
      this.selClass = null;
      this.signNum = 0;
    },
    //班级选择
    querySearchAsync(query, cb) {
      classSysList({ className: query, pageIndex: 1, pageSize: 20 })
        .then(res => {
          if (res.code == 1) {
            res.response.list.map(item => {
              item.value = item.className;
            });
            cb(res.response.list);
          } else {
            cd([]);
          }
        })
        .catch(res => {
          cb([]);
        });
    },
    handleSelect(item) {
      this.selClass = item;
    },
    startSign() {
      if (!this.selClass) {
        this.$message({
          showClose: true,
          message: "请先选择班级"
        });
        return;
      } else {
        this.startSignS = true;
        this.signFresh();
      }
    },
    signFresh() {
      classSignNum({ classId: this.selClass.id, courseId: this.courseId }).then(
        res => {
          if (res.code == 1) {
            this.signNum = res.response.checkInCount || 0;
          }
        }
      );
    },
    //
    goPlay(item) {
      this.$router.push({
        path: "/train/play/" + item.subCourseId + "?courseId=" + this.courseId
      });
    },
    goAssess(item) {
      this.$router.push({
        path: "/train/assess/" + item.id,
        query: {
          courseId: this.courseId
        }
      });
    },
    async getModules() {
      await allCategory({ categoryId: 1 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
      await allCategory({ categoryId: 0 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
    },
    async initData() {
      await this.getModules();
      courseOutline({ courseId: this.courseId }).then(res => {
        if (res.code == 1) {
          this.videoList = res.response || [];
        }
      });
      courseOverview({ courseId: this.courseId }).then(res => {
        if (res.code == 1) {
          this.teacherList = res.response.lecturerResponseVmList || [];
        }
      });
      courseTest({ courseId: this.courseId }).then(res => {
        if (res.code == 1) {
          this.testList = res.response;
        }
      });
      getCourseById(this.courseId).then(res => {
        if (res.code == 1) {
          this.detailData = res.response;
          this.SetCourseData(this.detailData);
          this.navList = ["全部课程"];
          this.navList.push(this.typeList[this.detailData.courseProject]);
          this.navList.push(this.detailData.courseName);
          this.navList.push(this.typeList[this.detailData.courseType]);
        }
      });
    }
  },
  activated() {
    this.courseId = this.$route.params.id;
    this.initData();
  }
};
</script>
<style lang="scss" scoped>
.nav {
  box-sizing: content-box;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  font-weight: 400;
  .back {
    display: inline-block;
    width: 100px;
    background-color: #fff;
    text-align: center;
    margin-right: 16px;
  }
}
.content {
  .top {
    height: 40px;
    line-height: 40px;
    padding: 0 50px;
    background-color: rgb(222, 230, 236);
    ul {
      user-select: none;
      li {
        width: 130px;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        display: inline-block;
        cursor: pointer;
      }
      .on {
        background-color: #fff;
        color: rgba(0, 124, 220, 1);
      }
    }
  }
  .detail {
    .baseInfo {
      padding: 0px 0 20px 0;
      // background: #fff;
      .base {
        padding: 0 25px;
        background: #fff;
        padding-top: 30px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
        dt {
          float: left;
          width: 470px;
          height: 250px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          padding-left: 490px;
          .title {
            height: 56px;
            line-height: 56px;
            font-size: 20px;
            font-weight: 400;
            span {
              font-size: 14px;
              color: rgba(0, 124, 220, 1);
            }
          }
          .descriptionT {
            line-height: 30px;
            padding-top: 40px;
            font-weight: 700;
            font-size: 16px;
            color: rgb(16, 16, 16);
          }
          .description {
            font-size: 14px;
            font-weight: 400;
            word-break: break-all;
            text-indent: 30px;
            line-height: 24px;
          }
        }
      }
      .teacher {
        padding: 10px 25px;
        background: #fff;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
        .title {
          font-weight: 700;
          font-size: 16px;
          color: rgb(16, 16, 16);
          line-height: 40px;
        }
        .grid-content {
          height: 180px;
          padding: 10px 10px 40px 0;
          dl {
            dt {
              float: left;
              width: 128px;
              height: 130px;
              border-radius: 10px;
              overflow: hidden;
              img {
                height: 100%;
                width: 100%;
              }
            }
            dd {
              padding-left: 150px;
              .title {
                font-weight: 400;
                font-size: 16px;
                line-height: 30px;
                color: #007cdc;
              }
              .description {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                padding: 4px;
                border-bottom: 1px dashed #bbbbbb;
                color: #6c7277;
                display: flex;
                .tit {
                  color: #101010;
                }
                .detail {
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
    .course {
      padding: 30px 25px 20px 25px;
      background: #fff;
      margin-top: 0;
      cursor: default;
      .td {
        display: inline-block;
        vertical-align: top;
      }
      .title {
        width: 560px;
      }
      .time {
        width: 145px;
      }
      .teacher {
        width: 172px;
      }
      .play {
        width: 220px;
      }
      .Thead {
        height: 32px;
        line-height: 32px;
        padding: 0 0 10px 0;
        .tr {
          background-color: rgb(249, 249, 249);
          .td {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
          }
          .td:not(.play) {
            border-right: 1px solid #999;
          }
        }
      }
      .Tbody {
        .tr {
          background-color: rgb(249, 249, 249);
          height: 38px;
          line-height: 38px;
          margin: 10px 0;
          .title {
            font-weight: 400;
            font-size: 14px;
            padding-left: 20px;
            padding-right: 10px;
            text-align: center;
            div {
              height: 38px;
              width: 100%;
            }
          }
          .time {
            font-weight: 400;
            font-size: 14px;
            text-align: center;
          }
          .teacher {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
          }
          .play {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 124, 220, 1);
            cursor: pointer;
          }
        }
      }
    }
    .test {
      padding: 30px 25px 20px 25px;
      background: #fff;
      cursor: default;
      .td {
        display: inline-block;
        vertical-align: top;
      }
      .title {
        width: 800px;
      }
      .play {
        width: 220px;
      }
      .Thead {
        height: 32px;
        line-height: 32px;
        padding: 0 0 10px 0;
        .tr {
          background-color: rgb(249, 249, 249);
          .td {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
          }
          .td:not(.play) {
            border-right: 1px solid #999;
          }
        }
      }
      .Tbody {
        .tr {
          background-color: rgb(249, 249, 249);
          height: 38px;
          line-height: 38px;
          margin: 10px 0;
          .title {
            font-weight: 400;
            font-size: 14px;
            padding-left: 20px;
            padding-right: 10px;
            text-align: center;
            div {
              height: 38px;
              width: 100%;
            }
          }
          .play {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 124, 220, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
}
.signbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 498px;
  height: 263px;
  background: #fff;
  padding: 15px;
  font-size: 14px;
  box-shadow: 0 0 0 1px #ccc;
  .top {
    text-align: right;
    line-height: 24px;
    font-size: 24px;
    span {
      cursor: pointer;
      color: #ff0409;
      font-weight: 400;
    }
  }
  .classSel {
    width: 290px;
    margin: 0 auto;
    line-height: 30px;
    font-size: 14px;
  }
}
</style>
